<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>
        <el-dialog :visible.sync="show" width="600px" :destroy-on-close="true" :close-on-click-modal="false"
            :append-to-body="true" :show-close="false" :close-on-press-escape="false" title="云存储设置">
            <el-form v-loading="loading" label-position="right" label-width="120px">
                <el-form-item label="云存储类型">
                    <el-radio-group v-model="yunId" placeholder="请选择">
                        <el-radio v-for="item in yunCunCus" :key="item.id" :label="item.id">{{ item.platform }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="域名">
                    <el-input v-model="yunCc.domain" />
                </el-form-item>

                <template v-if="yunCc.platform != '本地存储'">
                    <el-form-item :label="yunCc.platform == '腾讯云' ? 'SecretId' : 'AK'">
                        <el-input v-model="yunCc.ak" />
                    </el-form-item>

                    <el-form-item :label="yunCc.platform == '腾讯云' ? 'SecretKey' : 'SK'">
                        <el-input v-model="yunCc.sk" show-password />
                    </el-form-item>

                    <el-form-item label="存储桶">
                        <el-input v-model="yunCc.bucket_name" />
                    </el-form-item>

                    <el-form-item label="区域" v-if="yunCc.platform == '腾讯云'">
                        <el-input v-model="yunCc.region" />
                    </el-form-item>

                    <el-form-item label="地域节点" v-if="yunCc.platform == '阿里云'">
                        <el-input v-model="yunCc.endpoint" />
                    </el-form-item>
                </template>



                <!-- <el-form-item>
                    <el-button type="primary" @click="submitYun" size="small" icon="el-icon-check" :disabled="loading"
                        :loading="loading">保存并启用</el-button>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="default" icon="el-icon-close" @click="$emit('close')" :loading="loading"
                    :disabled="loading">取消</el-button>
                <el-button size="mini" type="primary" icon="el-icon-check" @click="submitYun" :loading="loading"
                    :disabled="loading">确定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { getOssList, getOssDetail, updateOss } from "@/api/oss";
export default {
    name: "OssSetting",
    data() {
        return {
            yunId: 1,
            yunCunCus: [],
            yunCc: {
                bucket_name: "",
                ak: "",
                sk: "",
                domain: "",
            },
            loading: false
        }
    },
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        this.loadOssList();
    },
    watch: {
        yunId: {
            handler(newValue, oldValue) {
                var yunCunCus = this.yunCunCus;
                if (newValue) {
                    this.yunCc = yunCunCus.filter((yun) => yun.id == newValue)[0];
                }
            },
        },
    },
    methods: {
        loadOssList() {
            this.loading = true;
            getOssList().then((res) => {
                this.loading = false;
                if (res.status != 0) {
                    return;
                }
                this.yunCunCus = res.data;
                this.yunCc = res.data.find((obj) => obj.enable === true) || res.data[0];
                this.yunId = this.yunCc.id;
            });
        },
        submitYun: function () {
            if (!this.yunId) {
                this.$message.error("请选择存储类型");
                return;
            }

            const { yunCc } = this;

            if (yunCc.platform === "本地存储") {
                if (!yunCc.domain || !/^https?:\/\/.*/.test(yunCc.domain)) {
                    this.$message.error('请输入正确的域名，且必须以 http:// 或 https:// 开头');
                    return;
                }
                // 检查是否为IP地址
                if (/^(https?:\/\/)?(\d+\.\d+\.\d+\.\d+)(:\d+)?(\/\S*)?$/.test(yunCc.domain)) {
                    this.$message.error('请输入域名而不是IP地址');
                    return;
                }

                let domainOnly = yunCc.domain.replace(/^(?:https?:\/\/)?(.*?)(?:\:\d+)?$/, '$1');
                // 检查是否包含端口号
                console.log(domainOnly);
                if (domainOnly.includes(':')) {
                    this.$message.error('请输入域名而不是带端口号的地址');
                    return;
                }
            } else {
                if (!yunCc.ak) {
                    this.$message.error("请输入ak");
                    return;
                }
                if (!yunCc.sk) {
                    this.$message.error("请输入sk");
                    return;
                }
                if (!/^https:\/\//.test(yunCc.domain)) {
                    this.$message.error("请输入域名且域名必须以https开头");
                    return;
                }

                if (yunCc.platform === "阿里云" && !/^https:\/\//.test(yunCc.endpoint)) {
                    this.$message.error("请输入阿里云地域节点且地域节点必须以https开头");
                    return;
                }

                if (yunCc.platform === "腾讯云" && !yunCc.region) {
                    this.$message.error("请输入腾讯云区域");
                    return;
                }

                if (!yunCc.bucket_name) {
                    this.$message.error("请输入存储桶");
                    return;
                }
            }

            var data = this.yunCc;
            this.loading = true;
            updateOss(data).then((res) => {
                this.loading = false;
                if (res.status != 0) {
                    return;
                }
                this.$message.success(`设置保存成功,并已启用${data.platform}`);
                this.$emit("success");
            });
        },
    },
}
</script>

<style></style>